<template>
  <div>
    <el-form
            ref="form"
            :inline="true"
            class="demo-form-inline"
            :model="queryModel"
            label-width="20px"
    >
      <el-form-item label="关键字"  label-width="80">
        <el-input v-model = "queryModel.keyword"></el-input>
      </el-form-item>
      <el-form-item label="文章类型"  label-width="80">
        <el-input v-model="queryModel.articleType"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="ui-select" icon="el-icon-search" @click="toSearch">查询</el-button>
      </el-form-item>
      <el-form-item class="right-btn">
        <el-button type="success" @click="toAdd" icon="el-icon-plus">添加</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="table.list"  border class="table-style" style="width: 100%"
              v-loading="loadData">
      <el-table-column type="index" label="序号" ></el-table-column>

      <el-table-column prop="title" label="标题" show-overflow-tooltip></el-table-column>
      <el-table-column prop="auther" label="作者" show-overflow-tooltip></el-table-column>
      <el-table-column prop="articleType" label="文章类型" show-overflow-tooltip></el-table-column>
      <el-table-column prop="createTime" label="上传时间" show-overflow-tooltip></el-table-column>
      <el-table-column prop="carousel" label="是否作为轮播" ></el-table-column>
      <el-table-column prop="updateTime" label="修改时间" ></el-table-column>
      <el-table-column label="操作" fixed="right" width="220">
        <template slot-scope="scope">
          <el-button type="primary"  @click="update(scope.row)">编辑</el-button>
          <el-button   @click="toDelete(scope.row)">查看</el-button>
          <el-button type="danger"  @click="toDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination style="position: relative;margin-top: 40px "
                :total="table.total"
                :page.sync="queryModel.pageNo"
                :limit.sync="queryModel.pageSize"
                @pagination="pagination"
    ></pagination>

    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="800px"
            center
            >
      <mform @success="dialogVisible = false,loadPage()" @close="dialogVisible = false" :data="rowData" :type="type"/>
    </el-dialog>
  </div>
</template>

<script>
  import mform from "./form";
  import Api from '@/api/article'
  export default {
    components: {
      mform
    },
    name: "index",
    data() {
      return {
        loadData: false,
        queryModel: {
          pageNo: 1,
          pageSize: 10,
        },
        table: {
          total: 0,
          list: []
        },
        dialogVisible: false,
        rowData: '',
        type: ''
      }
    },
    methods: {
      async loadPage() {
        this.loadData = true;
        try {
          let res = await Api.list(this.queryModel);
          if (res) {
            this.table.list = res.data;
            this.table.total = res.total;
            this.loadData = false;
          }
        }catch (e) {
          this.loadData = false;
          this.$message.error(e.msg)
        }

      },
      toAdd() {
        this.dialogVisible = true
        this.rowData = ''
        this.type = 1
      },
      update(row) {
        this.rowData = row
        this.dialogVisible = true
        this.type = 2

      },
      toDelete(data) {
        this.$confirm("确定要删除吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "info"
        }).then(() => {
          Api.remove(data)
                  .then(() => {
                    this.$message({type: "success", message: "删除成功!"});
                    this.loadPage(); //加载列表
                  })
                  .catch(data => {
                    this.$message({type: "warning", message: data.msg});
                  });
        })
                .catch(() => {
                });
      },
      toSearch() {
        this.queryModel.pageNo = 1;
        this.loadPage();
      },
      pagination(page) {
        this.queryModel.pageNo = page.page;
        this.loadPage()
      },
    },
    created() {
      this.loadPage()
    }
  }

</script>

<style scoped>

</style>
